<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            font-size:12px;
            line-height:20px;
            background: url(images/bk-login.png) repeat-y;
        }
        .main{
            width:525px;
            margin-left:auto;
            margin-right:auto;
            margin-top: 10%;
            margin-bottom: 25%;
            }
        .hr_1 {
            font-size: 14px;
            font-weight: bold;
            color: #3275c3;
            height: 35px;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #3275c3;
            vertical-align:bottom;
            padding-left:12px;
        }
        .left{
            text-align:right;
            width:80px;
            height:25px;
            padding-right:5px;
            }
            
        .center{
            width:135px;
          
            }
        .in{
            width:130px;
            height:16px;
            border:solid 1px #79abea;  
            outline:none;
            }
        
        .red{
            color:#cc0000;
            font-weight:bold;
            }
        
        div{
            color:#F00;
            }  
            
            .xiayibu {
    width: 135px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: #30adfa;
    font-size: 14px;
    border-radius: 5px;
    /* margin-left: 110px; */
    margin-top: 15px;
    cursor: pointer;
    border:0px;
    outline:none;
    cursor:pointer;
}
.cms_login_ver {
    width: 30%;
    outline: none;
    margin-left: 3%;
    border: 1px solid #c32c2c;
    background-color: #bd7070;
    line-height: 46px;
    letter-spacing: 4px;
    border-radius: 4px;
    cursor: default;
    color: white;
}
  
        </style>
        <script src="js/check.js">
        
        
        </script>
        </head>
        
        <body>
        <table class="main" border="0" cellspacing="0" cellpadding="0">
          <!-- <tr>
            <td><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></td>
          </tr> -->
          <tr>
            <td class="hr_1">用户登录</td>
          </tr>
          <tr>
            <td style="height:10px;"></td>
          </tr>
          <form action="https://baidu.com" method="post" name="myform">
          <tr>
            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="left">用户名：</td>
            <td class="center"><input id="cms_login_username" type="text" class="in" onblur="checkUser()" /></td>
            <!-- <td><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></td>
          </tr> -->
          <tr>
            <td class="left">密码：</td>
            <td class="center"><input id="cms_login_passward" type="password" class="in"  onblur="checkPwd()"/></td>
            <!-- <td><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></td> -->
          </tr>
          <tr>
            <td class="left">验证码：</td>
            <td class="center"><input  id="cms_login_ver_ipt" type="text" class="in" onblur="checkUser()" /></td>
            <td><span class="cms_login_ver" value="6666" id="cms_login_ver">6666</span></td>
            
          </tr>
         
          
           <tr>
             <td class="left">&nbsp;</td>
             <td class="center">
              <span onclick='location.href=("index.html")'>还没有账号？</span><a href="javascript:history.back()" style="text-decoration: none;color: #30adfa;">立即注册</a> 
               <!-- <input name="" type="image" src="images/register.jpg" /> -->
               <input type="submit" value="登录" class="xiayibu">
              </td>

             <td>&nbsp;</td>
           </tr>
        </table>
        </td>
          </tr>
          </form>
        </table>
       
        </body>
        <script src="./js/jquery-2.1.4.min.js"></script>
        
        <script>
            // 随机验证码
            var m = parseInt(Math.random(0, 9) * (9999 - 1000) + 1000);
            var n = $(".cms_login_ver").text(m)
            // 原生获取文本内容
            // var n = document.getElementsByClassName("cms_login_ver")[0].innerHTML;
            // console.log(n)
            // 点击按钮判断账户密码
            $(".xiayibu").click(function () {
                var username = $("#cms_login_username").val();
                var password = $("#cms_login_passward").val();
                var ver = $("#cms_login_ver_ipt").val();
                // console.log(typeof username)
                // console.log(ver)
                // 判断用户账户是不是能够转换成number类型，能，是false，不是true
                if (username=="m123") {
                    // alert("用户账户长度" + username.length)
                    // 判断用户密码是不是能够转换成number类型，能，是false，不是true
                    if (password=="zhu123") {
                        console.log("用户密码长度" + password.length)
                        // 判断用户输入得验证码
                        var n = $(".cms_login_ver").text()
                        // console.log(ver)
                        if (n == ver) {
                            alert("用户登录成功，等待跳转")
                        } else {
                            alert("用户验证码输入错误")
                        }
                    } else {
                        alert("用户密码输入错误")
                    }
                } else {
                    alert("用户账号输入错误")
                }
                console.log(username)
            })
        
        </script>
     <!--下雪 喜欢的可以用哦-->
	 <script type="text/javascript">
		/* 控制下雪 */
		function snowFall(snow) {
			/* 可配置属性 */
			snow = snow || {};
			this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
			this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
			this.fallSpeed = snow.fallSpeed || 3;   /* 坠落速度 */
		}
		/* 兼容写法 */
		requestAnimationFrame = window.requestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.msRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			function(callback) { setTimeout(callback, 1000 / 60); };
	
		cancelAnimationFrame = window.cancelAnimationFrame ||
			window.mozCancelAnimationFrame ||
			window.webkitCancelAnimationFrame ||
			window.msCancelAnimationFrame ||
			window.oCancelAnimationFrame;
		/* 开始下雪 */
		snowFall.prototype.start = function(){
			/* 创建画布 */
			snowCanvas.apply(this);
			/* 创建雪花形状 */
			createFlakes.apply(this);
			/* 画雪 */
			drawSnow.apply(this)
		}
		/* 创建画布 */
		function snowCanvas() {
			/* 添加Dom结点 */
			var snowcanvas = document.createElement("canvas");
			snowcanvas.id = "snowfall";
			snowcanvas.width = window.innerWidth-20;
			snowcanvas.height = document.body.clientHeight;
			snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
			document.getElementsByTagName("body")[0].appendChild(snowcanvas);
			this.canvas = snowcanvas;
			this.ctx = snowcanvas.getContext("2d");
			/* 窗口大小改变的处理 */
			window.onresize = function() {
				snowcanvas.width = window.innerWidth;
				/* snowcanvas.height = window.innerHeight */
			}
		}
		/* 雪运动对象 */
		function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
			this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
			this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
			this.size = Math.random() * flakeSize + 2;          /* 形状 */
			this.maxSize = flakeSize;                           /* 最大形状 */
			this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
			this.fallSpeed = fallSpeed;                         /* 坠落速度 */
			this.velY = this.speed;                             /* Y方向速度 */
			this.velX = 0;                                      /* X方向速度 */
			this.stepSize = Math.random() / 30;                 /* 步长 */
			this.step = 0                                       /* 步数 */
		}
		flakeMove.prototype.update = function() {
			var x = this.x,
				y = this.y;
			/* 左右摆动(余弦) */
			this.velX *= 0.98;
			if (this.velY <= this.speed) {
				this.velY = this.speed
			}
			this.velX += Math.cos(this.step += .05) * this.stepSize;
	
			this.y += this.velY;
			this.x += this.velX;
			/* 飞出边界的处理 */
			if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
				this.reset(canvas.width, canvas.height)
			}
		};
		/* 飞出边界-放置最顶端继续坠落 */
		flakeMove.prototype.reset = function(width, height) {
			this.x = Math.floor(Math.random() * width);
			this.y = 0;
			this.size = Math.random() * this.maxSize + 2;
			this.speed = Math.random() * 1 + this.fallSpeed;
			this.velY = this.speed;
			this.velX = 0;
		};
		// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
		flakeMove.prototype.render = function(ctx) {
			var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
			snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
			snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
			snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
			ctx.save();
			ctx.fillStyle = snowFlake;
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
			ctx.fill();
			ctx.restore();
		};
		/* 创建雪花-定义形状 */
		function createFlakes() {
			var maxFlake = this.maxFlake,
				flakes = this.flakes = [],
				canvas = this.canvas;
			for (var i = 0; i < maxFlake; i++) {
				flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
			}
		}
		/* 画雪 */
		function drawSnow() {
			var maxFlake = this.maxFlake,
				flakes = this.flakes;
			ctx = this.ctx, canvas = this.canvas, that = this;
			/* 清空雪花 */
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			for (var e = 0; e < maxFlake; e++) {
				flakes[e].update();
				flakes[e].render(ctx);
			}
			/*  一帧一帧的画 */
			this.loop = requestAnimationFrame(function() {
				drawSnow.apply(that);
			});
		}
		/* 调用及控制方法 */
		var snow = new snowFall({maxFlake:60});
		snow.start();
	</script>
	  <!--页面背景特效--> 
	  <!-- <script src="./js/background.js" count="200" zindex="-2" opacity="0.8" color="47,135,193" type="text/javascript"></script> -->
</html>